<template>
  <div class="index">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item, index in bannerList" :key="index">
        <router-link
          to="/knowProduct"
          class="animated bounceInLeft pic2"
        >
          <van-image
            class="img"
            :src="item"
          ></van-image>
        </router-link>
      </van-swipe-item>
    </van-swipe>

    <!-- 轮播图下的第一排 -->
    <div class="two">
      <router-link
        to="/appspr"
        class="animated bounceInLeft pic2"
      >
        <van-image
          class="img"
          :src="require('@/assets/index/2.png')"
        ></van-image>
      </router-link>
      <router-link
        to="/knowProduct"
        class="animated bounceInRight pic3"
      >
        <van-image
          class="img"
          :src="require('@/assets/index/3.png')"
        ></van-image>
      </router-link>
    </div>

    <!-- 轮播图下的第二排 -->
    <div class="thr">
      <router-link
        to="/news"
        class="animated bounceInLeft pic4"
      >
        <van-image
          class="img"
          :src="require('@/assets/index/4.png')"
        ></van-image>
      </router-link>
      <router-link
        to="/introduce"
        class="animated bounceInRight pic5"
      >
        <van-image
          class="img"
          :src="require('@/assets/index/5.png')"
        ></van-image>
      </router-link>
    </div>

    <!-- 首页底部信息 -->
    <footer class="footer">
      <div class="info">
        <div class="email">
          customerservice@liangzhun.com.cn
        </div>
        <div class="phone">
          (021) 64079319
        </div>
        <div class="copy">
          &copy; 2022量准版权所有&nbsp;沪ICP备16026575号-1
        </div>
      </div>
      <div>
        <router-link to="/join">
          <van-image
            class="join"
            :src="require('@/assets/index/join.png')"
          ></van-image>
        </router-link>
      </div>
    </footer>

  </div>

</template>

<script>
// import { directive, Swiper, SwiperSlide } from "vue-awesome-swiper";
import { fetchGetPhone } from '@/api/index'
// import "swiper/css/swiper.css";
export default {
  data() {
    return {
      bannerList: [
        require('@/assets/index/11.jpg')
      ]
    };
  },
  mounted() {
    this.getSwiperList()
  },
  methods: {
    // 获取轮播列表
    async getSwiperList() {
      try {
        const res = await fetchGetPhone()
        this.bannerList = res[0].img.split('$').filter(Boolean)
      } catch(err) {
        return err
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "src/styles/mixin.scss";

.index {
  .img {
    width: 100%;
  }
}
.pic2 {
  flex: 2;
}
.pic3 {
  flex: 4;
}
.pic4 {
  flex: 4;
}
.pic5 {
  flex: 2;
}
.one,
.two,
.thr {
  display: flex;
  img {
    width: 100%;
  }
}

.one .animated {
  margin-bottom: 7.5px;
}

.two,
.thr {
  padding: 0 7.5px;
}

.two .animated {
  padding: 7.5px;
}

.thr .animated {
  padding: 7.5px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7.5px;
  padding-top: 7.5px;
  padding-bottom: 15px;
  background-color: #f2f2f2;
}
.join {
  width: 45px;
  margin-right: 15px;
}

.info {
  margin-left: 15px;
  .email {
    font-size: 12px;
    background: url("~@/assets/index/mail.png") no-repeat 0 2px / 10px;
    padding-left: 15px;
  }

  .phone {
    font-size: 12px;
    margin-top: 9px;
    background: url("~@/assets/index/phone.png") no-repeat 0 1px / 10px;
    padding-left: 15px;
  }
}

.copy {
  margin-top: 8px;
  font-size: 12px;
}
</style>
<style lang="scss">
.swiper-pagination-bullet {
  width: 9px;
  height: 5px;
  border-radius: 10px;
  background-color: #fff;
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  width: 25px;
  opacity: 1;
}
</style>
